<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <title>移动登录</title>
  <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
  <link rel="stylesheet" href="component/elementUI/index.css">
  <link rel="stylesheet" href="style/wangeditor.css">
  <link rel="stylesheet" href="style/index.css">
  <style>
    #app {
      margin-top: 10px;
      font-weight: 800;
      color: rgb(109, 107, 107);
    }

    h1,
    h3 {
      text-align: center;
    }

    h3 {
      color: cornflowerblue;
      margin-bottom: 10px;
    }
  </style>
</head>

<body>
  <div id="app" v-cloak>
    <el-form :model="form" :rules="rules" ref="contract" class="demo-ruleForm">
      <el-row style="display: flex;flex-direction: column;align-items: center;">
        <el-col :xs="24" :sm="24" :lg="16" class="title">
          <h1>社区营销</h2>
            <h3>请登记您的信息</h3>
        </el-col>
        <el-col :xs="17" :sm="24" :lg="8">
          <el-form-item label="用户姓名" prop="Member_Name">
            <el-input v-model="form.Member_Name"></el-input>
          </el-form-item>
        </el-col>
        <el-col :xs="17" :sm="24" :lg="8">
          <el-form-item label="用户电话" prop="Member_SerialNumber">
            <el-input v-model.number="form.Member_SerialNumber"></el-input>
          </el-form-item>
        </el-col>
        <el-col :xs="17" :sm="24" :lg="8">
          <el-form-item label="省/市/区" required>
            <el-cascader @change="changeValue($event,1,'qu')" :options="options" v-model="value"
              :props="{ value: 'value' , label:'label' }" style="width: 100%;"></el-cascader>
          </el-form-item>
        </el-col>
        <el-col :xs="17" :sm="24" :lg="8">
          <el-form-item label="社区" required>
            <el-select @change="changeValue($event,2,'lou')" :disabled="value.length < 3" v-model="address.qu"
              filterable placeholder="请选择" style="width: 100%;">
              <el-option v-for="item in qu" :key="item.Department_SerialNumber" :label="item.Department_Name"
                :value="item.Department_SerialNumber"></el-option>
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :xs="17" :sm="24" :lg="8">
          <el-form-item label="详细地址" required>
            <el-col :xs="24" :sm="24" :lg="24">
              <el-col :xs="12" :sm="24" :lg="12">
                <el-select @change="changeValue($event,3,'dyuan')" :disabled="address.qu==''" v-model="address.lou"
                  style="width: 100%;" filterable placeholder="楼号">
                  <el-option v-for="item in lou" :key="item.Department_SerialNumber" :label="item.Department_Name"
                    :value="item.Department_SerialNumber"></el-option>
                </el-select>
              </el-col>
              <el-col :xs="12" :sm="24" :lg="12">
                <el-select @change="changeValue($event,4,'ceng')" :disabled="address.lou==''" v-model="address.dyuan"
                  style="width: 100%;" filterable placeholder="单元">
                  <el-option v-for="item in dyuan" :key="item.Department_SerialNumber" :label="item.Department_Name"
                    :value="item.Department_SerialNumber"></el-option>
                </el-select>
              </el-col>
            </el-col>
            <el-col :xs="24" :sm="24" :lg="24">
              <el-col :xs="12" :sm="24" :lg="12">
                <el-select @change="changeValue($event,5,'menpai')" :disabled="address.dyuan==''" v-model="address.ceng"
                  style="width: 100%;" filterable placeholder="层数">
                  <el-option v-for="item in ceng" :key="item.Department_SerialNumber" :label="item.Department_Name"
                    :value="item.Department_SerialNumber"></el-option>
                </el-select>
              </el-col>
              <el-col :xs="12" :sm="24" :lg="12">
                <el-select :disabled="address.ceng==''" v-model="address.menpai" style="width: 100%;" filterable
                  placeholder="户号">
                  <el-option v-for="item in menpai" :key="item.Department_SerialNumber" :label="item.Department_Name"
                    :value="item.Department_SerialNumber"></el-option>
                </el-select>
              </el-col>
            </el-col>
          </el-form-item>
        </el-col>
        <el-col :xs="24" :sm="24" :lg="0" style="display: flex; justify-content: center; padding-bottom: 40px;">
          <div v-if="QueryObject.type==1" style="display: flex; flex-direction: column;">
            <el-button type="primary" @click="onER('contract')" style="margin-top: 10px;" :loading="loading">生成二维码</el-button>
          </div>
          <el-button v-else type="primary" @click="onSubmit('contract')" style="margin-top: 10px;"
            :loading="loading">立即注册</el-button>
        </el-col>
      </el-row>
    </el-form>
    <div v-show="isShow" @click="isShow = false" style="position: fixed; top: 0; left: 0; display: flex; justify-content: center; align-items: center; width: 100%;height: 100%; background-color: #00000073;">
      <div id="qrcode-container" style="width: 160px; height: 160px;"></div>
    </div>
  </div>
</body>
<script type="text/javascript" src="utils/wangeditor.js"></script>
<script type="text/javascript" src="utils/jquery.min.js"></script>
<script type="text/javascript" src="utils/jquery.cookie.js"></script>
<script type="text/javascript" src="utils/jquery.qrcode.min.js"></script>
<script type="text/javascript" src="utils/vue.min.js"></script>
<script type="text/javascript" src="utils/vuex.min.js"></script>
<script type="text/javascript" src="component/elementUI/index.js"></script>
<script type="text/javascript" src="component/component.js"></script>
<script type="text/javascript" src="config/config.js"></script>
<script type="text/javascript" src="utils/FileSaver.min.js"></script>
<script type="text/javascript" src="utils/FileSaver.js"></script>
<script type="text/javascript" src="utils/xlsx.full.min.js"></script>
<script type="text/javascript" src="utils/xlsx.core.min.js"></script>
<script type="text/javascript" src="utils/jweixin.js"></script>
<script type="text/javascript" src="utils/compressor.js"></script>
<script type="text/javascript" src="utils/ID_Validity.js"></script>
<script type="text/javascript" src="utils/utils.js"></script>
<script>
  new Vue({
    el: '#app',
    data() {
      const validator = (rule, value, callback) => {
        if (!validatemobile(this.form.Member_SerialNumber)) {
          callback(new Error('请输入有效手机号'));
        } else {
          callback();
        }
      }
      return {
        rules: {
          Member_Name: [{ required: true, message: '请输入姓名', trigger: 'blur' }],
          Member_SerialNumber: [{ required: true, validator, trigger: 'blur' }],
        },
        form: {
          Member_SerialNumber: '',
          Member_Name: '',
          Sex: '',
          Email: '',
          Open_ID: '',
          ProvinceNumber:'',
          CityNumber:'',
          CountyNumber:'',
          Address:'',
          Sales_Datetime: '',
          Member_Notes: '',
          Store_SerialNumber: '',
          Creation_Datetime: '',
          Department_JSON: '',
          Row_Status: '0',
          Children: {
            business_member_department: []
          },
        },
        value: [],
        address: {
          qu: '',
          lou: '',
          dyuan: '',
          ceng: '',
          menpai: '',
        },
        qu: [],
        lou: [],
        dyuan: [],
        ceng: [],
        menpai: [],
        options: [],
        QueryObject: {},
        loading: false,
        isShow:false
      }
    },
    mounted() {
      //缺少用户进入该页面的方式
      this.QueryObject = getQueryObject();
      if (this.QueryObject.obj) {
        let str = this.QueryObject.obj
        this.form = JSON.parse(str).form;
        this.address = JSON.parse(str).address;
        this.value = [this.form.ProvinceNumber,this.form.CityNumber,this.form.CountyNumber];
        this.changeValue(this.value,'1','qu');
        this.changeValue(this.address.qu,'2','lou');
        this.changeValue(this.address.lou,'3','dyuan');
        this.changeValue(this.address.dyuan,'4','ceng');
        this.changeValue(this.address.ceng,'5','menpai');
      }
      this.getData();
    },
    methods: {
      getData() {
        //查询有内容的地址
        $.ajax({
          url: BASE_URL1 + '/Address1',
          type: 'GET',
          success: (res) => {
            this.options = res
          },
        })
      },
      changeValue(val, i, key) {
        let Condition = "Row_Status='0'"
        if (i == '1') {
          Condition = Condition + " AND CountyNumber = '" + val[val.length - 1] + "' AND Level = '" + i + "'"
        } else {
          Condition = Condition + " AND Parent_SerialNumber = '" + val + "' AND Level = '" + i + "'";
        }
        $.ajax({
          url: BASE_URL2 + '/salesOrder/queryShoppingTrolleyByTableName',
          type: 'GET',
          data: {
            TableName: 'business_department_info',
            Condition,
          },
          success: (res) => {
            console.log(res);
            this[key] = res;
          },
          dataType: 'json' //转数据格式  
        })
      },
      onER(formName) {
        const that = this;
        this.isShow = true
        this.$refs[formName].validate((valid) => {
          if (valid) {
            if (!this.address.menpai) {
              this.$message({
                message: '请选择详细地址',
                type: 'warning'
              })
              return;
            }
            this.loading = true;
            this.form.ProvinceNumber = this.value[0];
            this.form.CityNumber = this.value[1];
            this.form.CountyNumber = this.value[2];
            $.ajax({
              url: `${BASE_URL1}/WechatUrlLink2`,
              type: 'POST',
              data: {
                Query: JSON.stringify({ obj: {form:this.form,address:this.address}  }),
                Path:'/pages/index/goods'
              },
              success: function (res) {
                if (res.Status == 'success') {
                  $("#qrcode-container").qrcode({
                    width: 160, // 二维码宽度（单位像素）
                    height: 160, // 二维码高度（单位像素）
                    text: res.Url, // 二维码包含的内容
                  });
                }
              },
              error: function () {
                that.$message.error("操作失败，请稍后再试")
              },
              complete: function (XMLHttpRequest) {
                that.loading = false;
                requestPretreatment(XMLHttpRequest);
              },
              dataType: "json"
            })
          }
        })
      },
      onSubmit(formName) {//提交
        const that = this
        this.$refs[formName].validate((valid) => {
          if (valid) {
            if (!this.address.menpai) {
              this.$message({
                message: '请选择详细地址',
                type: 'warning'
              })
              return;
            }
            this.loading = true;
            this.form.Children.business_member_department.push({
              Member_Department_SerialNumber: this.address.menpai + '-' + this.form.Member_SerialNumber,
              Member_SerialNumber: this.form.Member_SerialNumber,
              Department_SerialNumber: this.address.menpai,
            });
            this.form.Open_ID = this.QueryObject.Open_ID ? this.form.Open_ID : '';
            this.form.Store_SerialNumber = this.QueryObject.Store_SerialNumber ? this.form.Store_SerialNumber : '';
            this.form.Department_JSON = JSON.stringify([this.address.qu, this.address.lou, this.address.dyuan, this.address.ceng, this.address.menpai]);
            this.form.Creation_Datetime = getYMDHMSDate();
            $.ajax({
              headers: requestHeaders(),
              url: `${BASE_URL2}/generalBusiness/generalSave`,
              type: 'POST',
              data: {
                Data: JSON.stringify({
                  Add: {
                    business_member_info: [that.form]
                  }
                })
              },
              success: function (res) {
                if (res.Status === 'success') {
                  if(that.QueryObject.way == '1' || that.QueryObject.way == '2'){
                    //分配积分
                    that.$message.success("提交成功")
                  }else{
                    that.$message.success("提交成功")
                  }
                } else {
                  that.$message.error("该手机号已存在，无法重复注册")
                }
              },
              error: function () {
                that.$message.error("操作失败，请稍后再试")
              },
              complete: function (XMLHttpRequest) {
                that.loading = false;
                requestPretreatment(XMLHttpRequest);
              },
              dataType: "json"
            })
          }
        })
      }
    },
  })

</script>

</html>